import {SettingsService} from '@delon/theme';
import {Component, OnDestroy, Inject, Optional} from '@angular/core';
import {Router} from '@angular/router';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd';
import {SocialService, SocialOpenType, ITokenService, DA_SERVICE_TOKEN} from '@delon/auth';
import {ReuseTabService} from '@delon/abc';
import {environment} from '@env/environment';
import {LoginService} from './login.service';
import {Login} from './Iogin.moudle';
import {User} from '@delon/theme/services/settings/interface';

@Component({
    selector: 'passport-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less'],
    providers: [SocialService, LoginService]
})
export class UserLoginComponent implements OnDestroy {

    form: FormGroup;
    error = '';
    type = 0;
    loading = false;

    constructor(
        fb: FormBuilder,
        private router: Router,
        public msg: NzMessageService,
        private settingsService: SettingsService,
        private socialService: SocialService,
        @Optional() @Inject(ReuseTabService) private reuseTabService: ReuseTabService,
        @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService,
        private loginService: LoginService
    ) {
        this.form = fb.group({
            userName: [null, [Validators.required, Validators.minLength(5)]],
            password: [null, Validators.required],
            mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
            captcha: [null, [Validators.required]],
            remember: [true]
        });


    }

    // region: fields

    get userName() {
        return this.form.controls.userName;
    }

    get password() {
        return this.form.controls.password;
    }

    get mobile() {
        return this.form.controls.mobile;
    }

    get captcha() {
        return this.form.controls.captcha;
    }

    // endregion

    switch(ret: any) {
        this.type = ret.index;
    }

    // region: get captcha

    count = 0;
    interval$: any;

    getCaptcha() {
        this.count = 59;
        this.interval$ = setInterval(() => {
            this.count -= 1;
            if (this.count <= 0)
                clearInterval(this.interval$);
        }, 1000);
    }

    // endregion

    submit() {


        this.error = '';
        if (this.type === 0) {
            this.userName.markAsDirty();
            this.password.markAsDirty();
            if (this.userName.invalid || this.password.invalid) return;
        } else {
            this.mobile.markAsDirty();
            this.captcha.markAsDirty();
            if (this.mobile.invalid || this.captcha.invalid) return;
        }

        this.loading = true;

        this.loginService.login(this.userName.value, this.password.value).subscribe((res: Login) => {
            this.loading = false;

            this.tokenService.set({
                token: res.token,
                name: res.username,
                // id: 10000,
                // time: +new Date
            });


            this.settingsService.setUser({
                name: res.username,
                // email: 'cdls'
            });

            console.log('登录成功了');
            // this.tokenService.set({
            //     token: res['toekn'],
            //     name: this.userName.value,
            //     id: 10000,
            //     time: +new Date
            // });
            this.router.navigate(['/']);
        }, __ => {
            this.loading = false;
            this.msg.error('用户名或密码错误');
        });

        // mock http
        // this.loading = true;
        // setTimeout(() => {
        //     this.loading = false;
        //     if (this.type === 0) {
        //         if (this.userName.value !== 'admin' || this.password.value !== '888888') {
        //             this.error = `账户或密码错误`;
        //             return;
        //         }
        //     }

        // 清空路由复用信息
        // this.reuseTabService.clear();
        // this.tokenService.set({
        //     token: '123456789',
        //     name: this.userName.value,
        //     email: `cipchk@qq.com`,
        //     id: 10000,
        //     time: +new Date
        // });
        // this.router.navigate(['/']);
        // }, 1000);
    }


    ngOnDestroy(): void {
        if (this.interval$) clearInterval(this.interval$);
    }
}
